<template>
	<view :class="['tabs', zClass]">
		<view
			v-for="(v,i) in items"
			:key="i"
			:class="['item', current===i?'active':'']"
			@click="onChange(i)">
			<badge :dot="v.dot" :count="v.count" :offset="[15, -10, 0, 0]">
				<view class="label">{{v.name}}</view>
			</badge>
		</view>
	</view>
</template>

<script>
	export default{
		props:{
			'zClass':{type:String},
			'items':{type:Array},
			'value':{type:Number},
		},
		data(){
			return{
				current: 0
			}
		},
		methods:{
			onChange(i){
				if(i===this.current)return false
				this.current = i
				this.$emit('input', i)
			}
		}
	}
</script>

<style lang="scss">
	.tabs{
		display: flex;
		background: #fff;
		height: 92upx;
		.item{
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.label{
			display: inline-block;
			padding: 26upx 0;
			box-sizing: border-box;
		}
		.active{
			.label{
				color: $primary-color;
				border-bottom: solid 2upx $primary-color;
			}
		}
	}
</style>
